
<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="订单编号" prop="orderCode">
          <el-input v-model="queryParams.orderCode" placeholder="请输入订单编号" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="规格" prop="specification">
          <el-input v-model="queryParams.specification" placeholder="请输入订单编号" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="产品" prop="productName">
          <el-input v-model="queryParams.productName" placeholder="请输入订单编号" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
              >新增</el-button>
            </el-col>
             <el-col :span="1.5">
              <el-button
                type="success"
                plain
                icon="el-icon-edit"
                size="mini"
                :disabled="single"
                @click="handleUpdate"
              >修改</el-button>
            </el-col> 
            <el-col :span="1.5">
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                :disabled="multiple"
                @click="handleDelete"
              >删除</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
              >导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
          </el-row>

      <el-tabs v-model="activeName" @tab-click="handleClick" v-loading="loading">
          <h2 align="center">产品预估成本</h2>
          <el-tooltip placement="top">
            <div slot="content">点击任意一行列，即可在下方查看详细记录</div>
          <el-table :data="orderPlanTableData" @row-click="showTab" >
            <el-table-column align="center" label="日期" prop="date"  />
            <el-table-column align="center" label="成品" prop="productName" />
            <el-table-column align="center" label="规格" prop="specification" />
            <el-table-column align="center" label="装箱数" prop="boxNum" />
            <el-table-column align="center" label="管理分摊" prop="management" />
            <el-table-column align="center" label="利息分摊" prop="Interest" />
            <el-table-column align="center" label="电费分摊" prop="electricity" />
            <el-table-column align="center" label="税收分摊" prop="tax" />
            <el-table-column align="center" label="折旧分摊" prop="Depreciation" />
            <el-table-column align="center" label="包装费用" prop="package" />
            <el-table-column align="center" label="利润分摊" prop="profit" />
            <el-table-column align="center" label="成本价" prop="costprice" />
            <el-table-column align="center" label="报价" prop="offer" />
            <el-table-column align="center" label="备注" prop="remark" />
            <el-table-column label="操作" align="center" width="150px" fixed="right">
            <template slot-scope="scope">
                 <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
                 <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
            </template>
            </el-table-column>
          </el-table>
          </el-tooltip>
          
          <pagination  :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
          
          <el-tabs v-model="activeName1" v-if="showTable">
            <h2 align="center">订单计划成本</h2>
            <el-tab-pane label="加工费用" name="first">
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddComm">新增明细</el-button>
              </el-col>
            </el-row>
              <el-table :data="ProcessingCost">
                <el-table-column align="center" label="零件代号" prop="partCode" />
                <el-table-column align="center" label="零件名称" prop="partName" />
                <el-table-column align="center" label="工模编号" prop="modelCode" />
                <el-table-column align="center" label="工模名称" prop="modelName" />
                <el-table-column align="center" label="出数" prop="outNum" />
                <el-table-column align="center" label="机型" prop="model" />
                <el-table-column align="center" label="定额（模/小时）" prop="quota" />
                <el-table-column align="center" label="每模价格" prop="permodule" />
                <el-table-column align="center" label="模具价格" prop="moldPrice" />
                <el-table-column align="center" label="预计生产模数" prop="production" />
                <el-table-column align="center" label="模具费用" prop="cost" />
                <el-table-column align="center" label="数量" prop="num" />
                <el-table-column align="center" label="每个加工费" prop="processfee" />
                <el-table-column label="操作" align="center" width="150px" fixed="right">
                     <template slot-scope="scope">
                         <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateComm(scope.row)">修改</el-button>
                         <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                     </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="包装价格" name="fourth">
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddBOM">新增明细</el-button>
              </el-col>
            </el-row>
              <el-table :data="PackagingPrice">
                <el-table-column align="center" label="代号" prop="code" />
                <el-table-column align="center" label="名称" prop="name" />
                <el-table-column align="center" label="规格" prop="size" />
                <el-table-column align="center" label="属性" prop="attribute" />
                <el-table-column align="center" label="用量" prop="consumption" />
                <el-table-column align="center" label="单价" prop="price" />
                <el-table-column align="center" label="费用" prop="cost" />
                <el-table-column label="操作" align="center" width="150px" fixed="right">
                     <template slot-scope="scope">
                         <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateBOM(scope.row)">修改</el-button>
                         <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                     </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="辅料价格" name="second">
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddTech">新增明细</el-button>
              </el-col>
            </el-row>
              <el-table :data="auxiliaryTableData">
                <el-table-column align="center" label="代号" prop="code" />
                <el-table-column align="center" label="名称" prop="name" />
                <el-table-column align="center" label="规格" prop="specification" />
                <!-- <el-table-column align="center" label="单位" prop="unit" />
                <el-table-column align="center" label="属性" prop="attribute" /> -->
                <el-table-column align="center" label="用量" prop="useNum" />
                <el-table-column align="center" label="颜色" prop="color" />
                <el-table-column align="center" label="单价" prop="unitPrice" />
                <el-table-column align="center" label="费用" prop="cost" />
                <el-table-column label="操作" align="center" width="150px" fixed="right">
                     <template slot-scope="scope">
                         <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateTech(scope.row)">修改</el-button>
                         <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteTech(scope.row)">删除</el-button>
                     </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="原料价格" name="third">
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddTech">新增明细</el-button>
              </el-col>
            </el-row>
              <el-table :data="rawMaterialTableData">
                <el-table-column align="center" label="代号" prop="code" />
                <el-table-column align="center" label="名称" prop="name" />
                <el-table-column align="center" label="规格" prop="specification" />
                <!-- <el-table-column align="center" label="单位" prop="unit" /> -->
                <el-table-column align="center" label="用量" prop="useNum" />
                <el-table-column align="center" label="颜色" prop="numcolor" />
                <el-table-column align="center" label="单价" prop="unitPrice" />
                <el-table-column align="center" label="费用" prop="cost" />
                <el-table-column label="操作" align="center" width="150px" fixed="right">
                     <template slot-scope="scope">
                         <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateTech(scope.row)">修改</el-button>
                         <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteTech(scope.row)">删除</el-button>
                     </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="二次加工费用" name="fifth">
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddMaterial">新增明细</el-button>
              </el-col>
            </el-row>
              <el-table :data="secondProcessingTableData">
                <el-table-column align="center" label="代号" prop="code" />
                <el-table-column align="center" label="名称" prop="name" />
                <!-- <el-table-column align="center" label="单位" prop="unit" /> -->
                <el-table-column align="center" label="加工工序" prop="process" />
                <!-- <el-table-column align="center" label="用量" prop="useNum" /> -->
                <el-table-column align="center" label="数量" prop="num" />
                <el-table-column align="center" label="加工单价" prop="unitPrice" />
                <el-table-column align="center" label="加工金额" prop="cost" />
                <el-table-column label="操作" align="center" width="150px" fixed="right">
                     <template slot-scope="scope">
                         <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateMaterial(scope.row)">修改</el-button>
                         <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteMaterial(scope.row)">删除</el-button>
                     </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
          <!-- <pagination  :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" /> -->
      </el-tabs>

      <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <el-row>
            <el-col :span="12">
                <el-form-item label="日期" prop="date">
                     <el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 240px;" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                 <el-form-item label="成品" prop="productName">
                     <el-input v-model="form.productName" placeholder="请输入成品" style="width: 240px;" />
                 </el-form-item>
            </el-col>
        </el-row>
        <el-row>
        <el-col :span="12">
        <el-form-item label="规格" prop="specification">
          <el-input v-model="form.specification" placeholder="请输入规格" style="width: 240px;" />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="装箱数" prop="boxNum">
          <el-input v-model="form.boxNum" placeholder="请输入装箱数" style="width: 240px;" />
        </el-form-item>
        </el-col>
        </el-row>
        <el-row>
        <el-col :span="12">
        <el-form-item label="管理分摊" prop="management">
          <el-input v-model="form.management" placeholder="请输入管理分摊" style="width: 240px;" />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="利息分摊" prop="Interest">
            <el-input v-model="form.Interest" placeholder="请输入利息分摊" style="width: 240px;" />
        </el-form-item>
        </el-col>
        </el-row>
        <el-row>
        <el-col :span="12">
        <el-form-item label="电费分摊" prop="electricity">
            <el-input v-model="form.electricity" placeholder="请输入电费分摊" style="width: 240px;" />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="税收分摊" prop="tax">
            <el-input v-model="form.tax" placeholder="请输入税收分摊" style="width: 240px;" />
        </el-form-item>
        </el-col>
        </el-row>
        <el-row>
        <el-col :span="12">
        <el-form-item label="折旧分摊" prop="Depreciation">
            <el-input v-model="form.Depreciation" placeholder="请输入折旧分摊" style="width: 240px;" />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="包装费用" prop="package">
            <el-input v-model="form.package" placeholder="请输入包装费用" style="width: 240px;" />
        </el-form-item>
        </el-col>
        </el-row>
        <el-row>
        <el-col :span="12">
        <el-form-item label="利润分摊" prop="profit">
            <el-input v-model="form.profit" placeholder="请输入利润分摊" style="width: 240px;" />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="成本价" prop="costprice">
            <el-input v-model="form.costprice" placeholder="请输入成本价" style="width: 240px;" />
        </el-form-item>
        </el-col>
        </el-row>
        <el-row>
        <el-col :span="12">
        <el-form-item label="报价" prop="offer">
            <el-input v-model="form.profit" placeholder="请输入报价" style="width: 240px;" />
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="备注" prop="remark">
            <el-input v-model="form.profit" placeholder="请输入备注" style="width: 240px;" />
        </el-form-item>
        </el-col>
    </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="titleComm" :visible.sync="openComm" width="800px" append-to-body>
       <el-form :model="formComm" :rules="rulesComm" ref="formComm" label-width="100px">
        <el-row>
          <el-col :span="12">
         <el-form-item label="零件代号" prop="partCode">
           <el-input v-model="formComm.partCode" placeholder="请输入零件代号" style="width: 240px;" />
         </el-form-item>
        </el-col>
        <el-col :span="12">
         <el-form-item label="零件名称" prop="partName">
           <el-input v-model="formComm.partName" placeholder="请输入零件名称" style="width: 240px;" />
         </el-form-item>
         </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
         <el-form-item label="工模编号" prop="modelCode">
           <el-input v-model="formComm.modelCode" placeholder="请输入工模编号" style="width: 240px;" />
         </el-form-item>
         </el-col>
         <el-col :span="12">
         <el-form-item label="工模名称" prop="modelName">
           <el-input v-model="formComm.modelName" placeholder="请输入工模名称" style="width: 240px;" />
         </el-form-item>
        </el-col>
         </el-row>
         <el-row>
          <el-col :span="12">
         <el-form-item label="出数" prop="outNum">
           <el-input v-model="formComm.outNum" placeholder="请输入出数" style="width: 240px;" />
         </el-form-item>
         </el-col>
         <el-col :span="12">
         <el-form-item label="机型" prop="model">
           <el-input v-model="formComm.model" placeholder="请输入机型" style="width: 240px;" />
         </el-form-item>
        </el-col>
         </el-row>
         <el-row>
          <el-col :span="12">
         <el-form-item label="定额" prop="quota">
           <el-input v-model="formComm.quota" placeholder="请输入定额" style="width: 240px;" />
         </el-form-item>
        </el-col>
        <el-col :span="12">
         <el-form-item label="每模价格" prop="permodule">
           <el-input v-model="formComm.permodule" placeholder="请输入每模价格" style="width: 240px;" />
         </el-form-item>
        </el-col>
         </el-row>
         <el-row>
          <el-col :span="12">
         <el-form-item label="模具价格" prop="moldPrice">
           <el-input v-model="formComm.moldPricea" placeholder="请输入模具价格" style="width: 240px;" />
         </el-form-item>
        </el-col>
        <el-col :span="12">
         <el-form-item label="定额" prop="production">
           <el-input v-model="formComm.productiona" placeholder="请输入定额" style="width: 240px;" />
         </el-form-item>
        </el-col>
         </el-row>
         <el-row>
          <el-col :span="12">
         <el-form-item label="预计生产模数" prop="cost">
           <el-input v-model="formComm.cost" placeholder="请输入预计生产模数" style="width: 240px;" />
         </el-form-item>
        </el-col>
        <el-col :span="12">
         <el-form-item label="数量" prop="num">
           <el-input v-model="formComm.num" placeholder="请输入数量" style="width: 240px;" />
         </el-form-item>
        </el-col>
         </el-row>
         <el-form-item label="每个加工费" prop="processfee">
           <el-input v-model="formComm.processfee" placeholder="请输入每个加工费" style="width: 240px;" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFormComm">确 定</el-button>
          <el-button @click="cancelComm">取 消</el-button>
      </div>
     </el-dialog>

    <el-dialog :title="titleBOM" :visible.sync="openBOM" width="500px" append-to-body>
       <el-form :model="formBOM" :rules="rulesBOM" ref="formComm" label-width="100px">
         <el-form-item label="代号" prop="code">
           <el-input v-model="formBOM.code" placeholder="请输入代号" style="width: 240px;" />
         </el-form-item>
         <el-form-item label="名称" prop="name">
           <el-input v-model="formBOM.name" placeholder="请输入名称" style="width: 240px;" />
         </el-form-item>
         <el-form-item label="规格" prop="size">
           <el-input v-model="formBOM.size" placeholder="请输入工模编号规格" style="width: 240px;" />
         </el-form-item>
         <el-form-item label="属性" prop="attribute">
           <el-input v-model="formBOM.attribute" placeholder="请输入属性" style="width: 240px;" />
         </el-form-item>
         <el-form-item label="用量" prop="consumption">
           <el-input v-model="formBOM.consumption" placeholder="请输入用量" style="width: 240px;" />
         </el-form-item>
         <el-form-item label="单价" prop="price">
           <el-input v-model="formBOM.price" placeholder="请输入单价" style="width: 240px;" />
         </el-form-item>
         <el-form-item label="费用" prop="cost">
           <el-input v-model="formBOM.cost" placeholder="请输入费用" style="width: 240px;" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFormBOM">确 定</el-button>
          <el-button @click="cancelBOM">取 消</el-button>
      </div>
     </el-dialog>

     <el-dialog :title="titleTech" :visible.sync="openTech" width="500px" append-to-body>
         <el-form :model="formTech" :rules="rulesTech" ref="formTech" label-width="100px">
         <el-form-item label="代号" prop="code">
           <el-input v-model="formTech.code" placeholder="请输入代号" style="width: 240px;" />
         </el-form-item>
         <el-form-item label="名称" prop="name">
           <el-input v-model="formTech.name " placeholder="请输入名称" style="width: 240px;" />
         </el-form-item>
         <el-form-item label="规格" prop="specification">
           <el-input v-model="formTech.specification" placeholder="请输入规格" style="width: 240px;" />
         </el-form-item>
         <el-form-item label="用量" prop="useNum">
           <el-input v-model="formTech.useNum" placeholder="请输入用量" style="width: 240px;" />
         </el-form-item>
         <el-form-item label="颜色" prop="color">
           <el-input v-model="formTech.color" placeholder="请输入颜色" style="width: 240px;" />
         </el-form-item>
         <el-form-item label="单价" prop="unitPrice">
           <el-input v-model="formTech.unitPrice" placeholder="请输入单价" style="width: 240px;" />
         </el-form-item>
         <el-form-item label="费用" prop="cost">
           <el-input v-model="formTech.cost" placeholder="请输入费用" style="width: 240px;" />
         </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitFormTech">确 定</el-button>
            <el-button @click="cancelTech">取 消</el-button>
         </div>
       </el-dialog>

       <el-dialog :title="titleMaterial" :visible.sync="openMaterial" width="500px" append-to-body>
         <el-form :model="formMaterial" :rules="rulesMaterial" ref="formMaterial" label-width="100px">
            <el-form-item label="代号" prop="code">
              <el-input v-model="formMaterial.code" placeholder="请输入代号" style="width: 240px;" />
            </el-form-item>
            <el-form-item label="名称" prop="name">
              <el-input v-model="formMaterial.name" placeholder="请输入名称" style="width: 240px;" />
            </el-form-item>
            <el-form-item label="加工工序" prop="process">
              <el-input v-model="formMaterial.process" placeholder="请输入加工工序" style="width: 240px;" />
            </el-form-item>
            <el-form-item label="数量" prop="num">
              <el-input v-model="formMaterial.num" placeholder="请输入" style="width: 240px;" />
            </el-form-item>
            <el-form-item label="加工单价" prop="unitPrice">
              <el-input v-model="formMaterial.unitPrice" placeholder="请输入加工单价" style="width: 240px;" />
            </el-form-item>
            <el-form-item label="加工金额" prop="cost">
              <el-input v-model="formMaterial.cost" placeholder="请输入加工金额" style="width: 240px;" />
            </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitFormMaterial">确 定</el-button>
            <el-button @click="cancelMaterial">取 消</el-button>
         </div>
       </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    name: '',
    data() {
      return {
         // 标题
        title:null,
        titleComm:null,
        titleBOM:null,
        titleTech:null,
        titleMaterial:null,
        // 打开弹出框
        open:false,
        openComm:false,
        openBOM:false,
        openTech:false,
        openMaterial:false,
        // 表单
        form:{},
        formComm:{},
        formBOM:{},
        formTech:{},
        formMaterial:{},
        // 校验
        rules:{},
        rulesComm:{},
        rulesBOM:{},
        rulesTech:{},
        rulesMaterial:{},
        // 加载
        loadingComm:false,
        loadingBOM:false,
        loadingTech:false,
        loadingMaterial:false,
        activeName: 'first',
        showSearch: true,
        activeName1: 'first',
        showTable: false,
        loading: false,
        orderPlanTableData:[
          {
            date:'2016/12/12',
            productName: '产品1',
            specification: '规格1',
            boxNum: 10,
            management: 10000,
            Interest: 5000,
            electricity: 1000,
            tax: 500,
            Depreciation: 100,
            package: 50,          
            profit: 10000,
            costprice: 11000,
            offer: 10000,
            remark: '备注1'
          },{
            date:'2016/10/11',
            productName: '产品2',
            specification: '规格2',
            boxNum: 21,
            management: 15623,
            Interest: 5852,
            electricity: 1987,
            tax: 500,
            Depreciation: 100,
            package: 50,          
            profit: 10780,
            costprice: 11000,
            offer: 10066,
            remark: '备注2'
          },{
            date:'2016/06/12',
            productName: '产品3',
            specification: '规格3',
            boxNum: 15,
            management: 16500,
            Interest: 5050,
            electricity: 1010,
            tax: 506,
            Depreciation: 150,
            package: 50,          
            profit: 10780,
            costprice: 11066,
            offer: 10540,
            remark: '备注3'
          }
        ],
        ProcessingCost:[{
            partCode:'01',
            partName:'儿童碗',
            modelCode:'0101',
            modelName:'碗',
            outNum:'100',
            model:'222',
            quota:'66',
            permodule:'10',
            moldPrice:'20',
            production:'100',
            cost:'60',
            num:'100',
            processfee:'30',
        },{
            partCode:'02',
            partName:'儿童碗',
            modelCode:'0202',
            modelName:'碗',
            outNum:'120',
            model:'333',
            quota:'69',
            permodule:'75',
            moldPrice:'55',
            production:'660',
            cost:'58',
            num:'156',
            processfee:'60',
        },{
            partCode:'03',
            partName:'儿童碗',
            modelCode:'0303',
            modelName:'碗',
            outNum:'163',
            model:'444',
            quota:'68',
            permodule:'56',
            moldPrice:'21',
            production:'562',
            cost:'55',
            num:'690',
            processfee:'40',
        }],
        PackagingPrice:[{
        code:'02',
        name:'条形码',
        size:'小',
        attribute:'256',
        consumption:'856',
        price:'965',
        cost:'541',
        },{
        code:'03',
        name:'条形码',
        size:'中',
        attribute:'569',
        consumption:'857',
        price:'854',
        cost:'123',
        },{
        code:'04',
        name:'条形码',
        size:'大',
        attribute:'222',
        consumption:'333',
        price:'666',
        cost:'888',
        }],
        auxiliaryTableData:[{
            code:'03',
            name:'碗',
            // specification:'',
            // unit:'',
            attribute:'个',
            useNum:'85',
            color:'蓝色',
            unitPrice:'6',
            cost:'888',
        },{
            code:'04',
            name:'碗',
            attribute:'个',
            useNum:'66',
            color:'红色',
            unitPrice:'5',
            cost:'999',
        },{
            code:'05',
            name:'碗',
            attribute:'个',
            useNum:'96',
            color:'白色',
            unitPrice:'5',
            cost:'666',
        }],
        rawMaterialTableData:[{
            code:'04',
            name:'碗',
            // specification:'',
            // unit:'',
            attribute:'个',
            useNum:'85',
            color:'蓝色',
            unitPrice:'6',
            cost:'888',
        },{
            code:'05',
            name:'碗',
            attribute:'个',
            useNum:'77',
            color:'黄色',
            unitPrice:'3',
            cost:'565',
        },{
            code:'06',
            name:'碗',
            attribute:'个',
            useNum:'85',
            color:'粉色',
            unitPrice:'6',
            cost:'999',
        }],
        secondProcessingTableData:[{
            code:'05',
            name:'',
            process:'',
            num:'89',
            unitPrice:'26',
            cost:'888',
        },{
            code:'06',
            name:'',
            process:'',
            num:'59',
            unitPrice:'85',
            cost:'222',
        },{
            code:'07',
            name:'',
            process:'',
            num:'25',
            unitPrice:'26',
            cost:'555',
        }],
        queryParams:{
          pageNum: 1,
          pageSize: 10,
          orderCode: ''
        },
        total: 1,
      }
    },
    methods:{
        handleRowClick(row){
      this.name = row.name;
      this.loadingComm = true;
       this.loadingDatalied = true;
       this.loadingBOM = true;
       this.loadingTech = true;
       this.loadingMaterial = true;
      setTimeout(() => {
        this.formComm = row;
        this.loadingComm = false;
         this.loadingDatalied = false;
         this.loadingBOM = false;
         this.loadingTech = false;
         this.loadingMaterial = false;
      }, 1000); // 延迟1秒

    },
    handleSelectionChange(val) {
      console.log(val)
    },
    submitForm(){
      this.open = false;
    },
    cancel(){this.open = false;},
    handleQuery() {
      this.loading = false;
    },
    resetQuery() {
    },
    handleAdd() {
      this.title = '新增'
      this.open = true;
      this.isEdit = false;
    },
    handleUpdate(row) {
      this.title = '修改'
      this.open = true;
      this.isEdit = false;
      this.form = row;
    },
    handleAddComm(){
      this.titleComm = '新增'
      this.openComm = true;
      this.formComm = row;
    },
    handleUpdateComm(row){
      this.titleComm = '修改'
      this.openComm = true;
      this.formComm = row;
    },
    submitFormComm(){
      this.openComm = false;
    },
    cancelComm(){this.openComm = false;},
    showTab(row) {
      this.showCard = true
    },
    handleAddBOM(){
    //   this.resetFormBOM();
      this.titleBOM = '新增'
      this.openBOM = true;
      this.formBOM = row;
    },
    handleUpdateBOM(row){
      this.titleBOM = '修改'
      this.openBOM = true;
      this.formBOM = row;
    },
    submitFormBOM(){
      this.openBOM = false;
    },
    cancelBOM(){this.openBOM = false;},
    handleAddTech(){
    //   this.resetFormTech();
      this.titleTech = '新增'
      this.openTech = true;
      this.formTech = row;
    },
    handleUpdateTech(row){
      this.titleTech = '修改'
      this.openTech = true;
      this.formTech = row;
    },
    submitFormTech(){
      this.openTech = false;
    },
    cancelTech(){this.openTech = false;},
    handleAddMaterial(){
    //   this.resetFormMaterial();
      this.titleMaterial = '新增'
      this.openMaterial = true;
      this.formMaterial = row;
    },
    handleUpdateMaterial(row){
      this.titleMaterial = '修改'
      this.openMaterial = true;
      this.formMaterial = row;
    },
    submitFormMaterial(){
      this.openMaterial = false;
    },
    cancelMaterial(){this.openMaterial = false;},
    handleDelete(row) {
      this.$confirm('确认删除该订单？')
       .then(() => {
          this.orderdata.splice(this.orderdata.indexOf(row), 1)
        })
       .catch(() => {
        })
    },
      showTab() {
        this.showTable = true;
      },
      handleClick(){
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
        }, 2000);
      },
        handleQuery() {},
    getList() {},
    resetQuery() {}
    },
  }
  </script>
  